<template>
  <div :value="selectIndex">
    <div v-if="!routerType" class="bar-father" >
      <div v-for="(item, index) in barData" :key="index" :class="{ 'bar-padding': selectIndex === index }"
        @click="setSelectIndex(index)">
        <div :class="{
          'selected-bar': selectIndex === index,
          'bar': selectIndex !== index,
        }">{{ item }}
        </div>
      </div>
    </div>
    <div v-if="routerType" class="bar-father" >
      <router-link :to="routerList[index]" v-for="(item, index) in barData" :key="index" :class="{ 'bar-padding': selectIndex === index }"
        @click.native="setSelectIndex(index)">
        <div :class="{
          'selected-bar': selectIndex === index,
          'bar': selectIndex !== index,
        }">{{ item }}
        </div>
      </router-link>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectIndex: 0
    }
  },
  props: {
    barData: {
      type: Array,
      validator(value) {
        for (let i = 0; i < value.length; i++) {
          if (typeof value[i] !== 'string') return false
        }
        return true
      }
    },
    value: {
      type: Number,
      default: 0,
      require: true
    },
    routerType:{
      type:Boolean,
      default:false,
      require:false
    },
    routerList:{
      type:Array,
      default:()=>[],
      require:false
    }
  },
  methods: {
    setSelectIndex(index) {
      this.selectIndex = index
      this.$emit('handleSelect', index)
    }
  },
  watch: {
    'value' :{
      handler(newVal){
        this.selectIndex = newVal
      },
      immediate:true
    }
  }
}
</script>

<style scoped>
.bar-father {
  display: flex;
  /* margin-left: 10px; */
}

.selected-bar {
  background-color: #fff;
  /* margin: 10px 10px; */
  padding: 5px 0px;
  border-bottom: #9370db solid 2px;
}

.bar {
  /* margin: 20px 20px; */
  padding: 15px 35px;
}

.bar-padding {
  background-color: #fff;
  border-radius: 5px 5px 0 0;
  padding: 10px 35px 15px 35px;
}

a{
    text-decoration:none;
    color:black;
    cursor: default
}
</style>